<template>
    <div id="learn-model">
        <el-dialog
            title="考试记录"
            v-model="recordDialog" 
            draggable 
            :close-on-click-modal="false" 
            :fullscreen="true"
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;">
                    <div class="search-s page-public-s" style="box-sizing: border-box;">
                        <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                            <el-form class="box-f" ref="queryForm" :inline="true">
                                <el-form-item label="课程名称：">
                                    <el-input disabled readonly v-model="v_CourseName" placeholder="请输入课程类型" />
                                </el-form-item>
                                <el-form-item label="考试用户：">
                                    <el-select 
                                        v-model="userVal" 
                                        filterable 
                                        class="m-2" 
                                        placeholder="选择用户" 
                                        @change="userChange"
                                        value-key="id"
                                        popper-class="set-select"
                                        :popper-append-to-body="false"
                                    >
                                        <el-option
                                            v-for="item in userOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item >
                                    <el-button @click='searchClick' icon="ele-Search" type="primary"> 查询 </el-button>
                                    <el-button  @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>

                    <div style="box-sizing: border-box;" class="flex-1 pos-r">
                        <div class="pos-a w-h-100" style="box-sizing: border-box;">
                            <el-card class="box-card w-h-100" shadow="never">
                                <div style="" class="w-h-100 ver-flex">
                                    <div class="flex-1 pos-r">
                                        <div class="pos-a w-h-100">
                                            <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                                <el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_CourseName" label="课程名称"  align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_SysUserName" label="用户名称"  align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="试卷总分"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.n_FullScore">{{ scope.row.n_FullScore }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="n_Score" label="考试得分"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.n_Score">{{ scope.row.n_Score }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="分数等级"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_ScopeStageName">{{ scope.row.v_ScopeStageName }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="d_StartTime" label="考试开始时间"  align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="考试结束时间"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.d_EndTime">{{ scope.row.d_EndTime }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true"  label="考试用时" align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.n_UsedTime">{{ scope.row.n_UsedTime }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="试卷状态"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.n_State === 0" style="color:#E6A23C;">{{scope.row.v_StateName}}</span>
                                                        <span v-else-if="scope.row.n_State === 1" style="color:#67C23A;">{{scope.row.v_StateName}}</span>
                                                        <span v-else-if="scope.row.n_State === 2" style="color:#F56C6C;">{{scope.row.v_StateName}}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="180" label="操作" align="center" fixed="right">
                                                    <template #default="scope">
                                                        <div class="operate-s">
                                                            <el-button v-if="scope.row.n_State !== 0" @click="nodeClick(scope.row)" class="icon-e" icon="ele-View" size="small" text type="primary">查看考卷</el-button>
                                                            <el-button v-else class="icon-e" icon="ele-View" size="small" text type="warning">考试进行中</el-button>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                        <el-pagination
                                            v-model:currentPage="pageNo"
                                            v-model:page-size="pageSize"
                                            :total="totalRows"
                                            :page-sizes="[10, 20, 50, 100]"
                                            small
                                            background
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            class="w-h-100"
                                        />
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
        <!-- 查看用户考卷 -->
        <DoExercise
            setStatus="detail"
            :repairInfo="paperInfo"
            :isUseDialog="paperDialog"
            @cancelPaperClick="cancelPaperClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue';
import getTableData from '/@/utils/getTableData';
import { OmsEduExamOLPage, UserExamPaperList, sysUserdetail, } from '/@/api/centerControl/sms';
import { sysUserSelector } from '/@/api/centerControl/pubilc';
import { getUserInfo } from '/@/api/user';
import ViewPaper from './view-paper.vue';
import DoExercise from './do-exercise.vue';
export default defineComponent( {
    name: 'exam-record',
    components: { DoExercise },
    props: {
        recordDialog:{
            type: Boolean,
            default: false,
        },
        recordInfo: {
            type: String,
            default: '',
        }
    },
    setup(props,ctx){
        let searchObj:any = reactive({
            l_TrainingPlanId: 0,
        });
        let l_SysUserId = 0;
        const v_CourseName = ref();
        const paperInfo = ref();
        const paperDialog = ref(false);
        let userInfo:any = '';

        const userVal = ref('');
        const userOptions = ref();

        /*** userChange 用户改变事件 */
        const userChange = (val: any) => {
            l_SysUserId = val;
        };

        /*** searchClick 查询按钮点击事件 */
        const searchClick = () => {
            if(l_SysUserId !== 0) searchObj.l_SysUserId = l_SysUserId;
        };

        /*** resetClick 重置按钮点击事件 */
        const resetClick = () => {
            resetFun();
            userVal.value = '';
            searchObj.l_TrainingPlanId = JSON.parse(props.recordInfo).id;
        };
        
        const nodeClick = (val: any) => {
            console.log(val,'val')
            // let getData = getPaperFun(val);
            getPaperFun(val);
        };

        /*** getPaperFun 获取试卷函数 */
        const getPaperFun = async(val: any) => {
            let param: any = {};
            param.l_TrainingPlanId = val.l_TrainingPlanId;
            param.l_SysUserId = val.l_SysUserId;
            // param.l_SysUserId = userInfo.id;
            let res: any = await UserExamPaperList(param);
            let ras: any = await sysUserdetail({ id: val.l_SysUserId});
            let setObj: any = {};
            let totalNum = 0;
            res.data.map((i: any) => {
                totalNum += i.n_Score;
                i.options = i.examPaperDe;
            });
            if(Object.keys(ras.data).length !== 0 && ras.success){
                if(ras.data.sysEmpInfo && Object.keys(ras.data.sysEmpInfo).length !== 0){
                    setObj.orgName = ras.data.sysEmpInfo.orgName;
                    setObj.empName = ras.data.sysEmpInfo.empName;
                }
            }
            console.log(res.data,'res.data')
            setObj.titleCon = val.v_CourseName;
            // setObj.paperName = val.v_CourseName;
            setObj.paperArr = res.data;
            setObj.totalNum = totalNum;
            paperInfo.value = JSON.stringify(setObj);
            paperDialog.value = true;
        }

        /*** resetFun 清除条件查询数据 */
        const resetFun = () => {
            let newObj = Object.keys(searchObj)
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                })
            }
        };

        /*** getUserInfoFun 获取用户信息 */
        const getUserInfoFun = async() => {
            let param = {}
            let res: any = await sysUserSelector(param);
            if(res.success) userOptions.value = res.data;
        }

        /*** 获取用户信息 */
        const getUserFun = async() => {
            let res:any = await getUserInfo();
            if(res.success){
                userInfo = res.data;
            }
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.recordDialog,(newVal) => {
            if(newVal){
                getUserInfoFun();
                getUserFun();
                v_CourseName.value = JSON.parse(props.recordInfo).v_CourseName;
                searchObj.l_TrainingPlanId = JSON.parse(props.recordInfo).id;
            }
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }
        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelRecordClick');
        }
        /*** cancelPaperClick 查看考卷关闭事件 */
        const cancelPaperClick = () => {
            paperDialog.value = false;
        };
        /*** recordDialog 响应弹窗的关闭  */
        const recordDialog = computed(() => {
            return props.recordDialog
        })
        return {
            ...getTableData(OmsEduExamOLPage,{},searchObj),
            handleClose,
            recordDialog,
            cancelUseClick,
            searchClick,
            resetClick,
            nodeClick,
            
            userVal,
            userChange,
            userOptions,
            v_CourseName,
            paperInfo,
            paperDialog,
            cancelPaperClick,
        }
    },
})
</script>
<style scoped lang="scss">
    :deep(.el-dialog__body){
        height: calc(100vh - 110px);
        max-height: none!important;
        overflow-y: hidden;
    }
</style>
